<template>
  <div class="pipeline-section">
    <div class="pipeline-header">
      <div class="pipeline-title">
        <i class="fas fa-project-diagram"></i>
        数据集处理流水线
      </div>

    </div>

    <!-- 动态生成流水线步骤卡片 -->
    <div class="pipeline-container">
      <DatasetCard
        v-for="(step, index) in datasetOperations"
        :key="index"
        :stepIndex="index + 1"
        :name="step.name"
        :description="step.description"
        :icon="step.icon"
        :columns="step.columns"
        :isActive="currentStep === index + 1"
        :showAllColumns="showAllColumns[index + 1]"
        @select-step="selectStep"
        @toggle-columns="toggleColumns"
      />
    </div>
  </div>
</template>

<script>
import DatasetCard from './DatasetCard.vue';
export default {
  components: {
    DatasetCard,
  },
  data() {
    return {
      currentStep: 1,
      datasetOperations: [], // 初始化为空数组
      showAllColumns: {},
    };
  },
  methods: {
    selectStep(stepId) {
      this.currentStep = stepId;
      // 暴露当前步骤字段数据
      const stepIndex = stepId - 1;
      if (stepIndex >= 0 && stepIndex < this.datasetOperations.length) {
        this.$emit('step-selected', this.datasetOperations[stepIndex].columns);
      }
    },
    toggleColumns(stepId) {
      this.$set(this.showAllColumns, stepId, !this.showAllColumns[stepId]);
    },
    getColumnClass(column) {
      if (column.status === 'modified') return 'row-modified';
      if (column.status === 'removed') return 'row-removed';
      if (column.status === 'split') return 'row-split';
      if (column.status === 'added') return 'row-added';
      if (column.status === 'aggregate') return 'row-aggregate';
      return '';
    },
    getColumnIconClass(column) {
      if (column.status === 'modified') return 'icon-modified';
      if (column.status === 'removed') return 'icon-removed';
      if (column.status === 'split') return 'icon-split';
      if (column.status === 'added') return 'icon-added';
      if (column.status === 'aggregate') return 'icon-aggregate';
      return 'icon-none';
    },
    getColumnIcon(column) {
      if (column.status === 'modified') return 'fas fa-sync-alt';
      if (column.status === 'removed') return 'fas fa-trash';
      if (column.status === 'split') return 'fas fa-cut';
      if (column.status === 'added') return 'fas fa-plus';
      if (column.status === 'aggregate') return 'fas fa-object-group';
      return '';
    },

    // 添加字段比对函数
    compareColumns(currentColumns, targetColumns) {
      return currentColumns.map(col => {
        const targetCol = targetColumns.find(tc =>
          tc.name === col.name &&
          tc.type === col.type &&
          tc.required === col.required
        );

        // 如果字段完全匹配，添加matched状态
        return targetCol ? {...col, status: 'matched'} : col;
      });
    },

    updateDatasetOperations(selectedTable) {
      const mockData = require('@/views/db/mockData.js');

      // 映射目标表到原始表（示例映射，可根据实际需求调整）
      const tableMapping = {
        '目标客户表': 'old_customer',
        // 添加其他表的映射关系
      };

      // 获取原始表名（默认为'old_customer'）
      const sourceTable = tableMapping[selectedTable] || 'old_customer';

      // 获取原始表和目标表字段
      const sourceFields = mockData.dbTables[sourceTable];
      const targetFields = mockData.dbTables[selectedTable]; // 使用selectedTable作为目标表

      if (sourceFields && targetFields) {
        // 获取流水线步骤字段定义
        const stepFields = mockData.datasetFields;

        // 获取目标表字段作为比对基准
        const targetFieldsForCompare = targetFields.map(field => ({
          name: field.name,
          type: field.type,
          required: field.required
        }));

        this.datasetOperations = [
          // 步骤1: 原始数据
          {
            name: '原始数据表',
            description: `${sourceTable} 原始数据`,
            icon: 'fas fa-database',
            columns: this.compareColumns(
              stepFields[sourceTable].map(field => {
                const sourceField = sourceFields.find(f => f.name === field.name);
                return {
                  ...field,
                  type: sourceField ? sourceField.type : '未知',
                  comment: sourceField ? sourceField.comment : '',
                  required: sourceField ? sourceField.required : false,
                  dataType: sourceField ? sourceField.dataType : ''
                }
              }),
              targetFieldsForCompare
            )
          },
          // 步骤2: 字段标准化
          {
            name: '字段标准化',
            description: '字段名称和格式标准化',
            icon: 'fas fa-sync-alt',
            columns: this.compareColumns(
              stepFields['2'].map(field => {
                const sourceField = sourceFields.find(f =>
                  f.name === field.name ||
                  (field.name === 'full_name' && f.name === 'name') ||
                  (field.name === 'age' && f.name === 'my_age') ||
                  (field.name === 'gender' && f.name === 'sex')
                );

                return {
                  ...field,
                  type: sourceField ? sourceField.type : '未知',
                  comment: field.changeType === 'added' ? '新增字段' : (sourceField ? sourceField.comment : ''),
                  required: field.required,
                  dataType: sourceField ? sourceField.dataType : '',
                  // 设置状态类型
                  status: field.changeType
                };
              }),
              targetFieldsForCompare
            )
          },
          // 步骤3: 数据增强
          {
            name: '数据增强',
            description: '添加客户等级信息',
            icon: 'fas fa-chart-line',
            columns: this.compareColumns(
              stepFields['3'].map(field => {
                const targetField = targetFields.find(f => f.name === field.name);

                return {
                  ...field,
                  type: targetField ? targetField.type : '未知',
                  comment: targetField ? targetField.comment : '',
                  required: targetField ? targetField.required : false,
                  dataType: targetField ? targetField.dataType : '',
                  // 设置状态类型
                  status: field.changeType
                };
              }),
              targetFieldsForCompare
            )
          }
        ];

        this.showAllColumns = {};
        this.datasetOperations.forEach((_, index) => {
          this.$set(this.showAllColumns, index + 1, false);
        });
      } else {
        console.error(`未找到表 ${sourceTable} 或 ${selectedTable} 的字段定义`);
      }
    },
  },
  mounted() {
    this.$on('table-selected', this.updateDatasetOperations);
  },
};
</script>

<style scoped>
.pipeline-header {
  padding: 20px; /* 统一 padding */
  font-size: 1.4rem; /* 统一 font-size */
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--header-bg);
}

.pipeline-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pipeline-title i {
  color: var(--panel-color); /* 统一 icon 颜色 */
}

/* 流水线步骤容器 */
.pipeline-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 15px 0;
  flex-wrap: nowrap;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  padding: 20px;
  border: 1px solid var(--border-color);
  height: 100%; /* 设置高度为100% */
}

/* 步骤卡片 */
.step-card {
  min-width: 350px;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
  border: 1px solid var(--border-color);
  overflow: hidden;
  flex-shrink: 0;
}

.step-card.active {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  border: 2px solid;
  border-top-width: 5px;
}

.step-card.step-1.active {
  border-color: var(--step-1-color);
  border-top-color: var(--step-1-color);
}

.step-card.step-2.active {
  border-color: var(--step-2-color);
  border-top-color: var(--step-2-color);
}

.step-card.step-3.active {
  border-color: var(--step-3-color);
  border-top-color: var(--step-3-color);
}

.step-card.step-4.active {
  border-color: var(--step-4-color);
  border-top-color: var(--step-4-color);
}

.step-header {
  padding: 18px;
  background: var(--header-bg);
  font-weight: 600;
  display: flex;
  align-items: center;
  position: relative;
}

.step-header.step-1 {
  background-color: rgba(66, 134, 244, 0.1);
  border-left: 5px solid var(--step-1-color);
}

.step-header.step-2 {
  background-color: rgba(255, 140, 0, 0.1);
  border-left: 5px solid var(--step-2-color);
}

.step-header.step-3 {
  background-color: rgba(67, 206, 162, 0.1);
  border-left: 5px solid var(--step-3-color);
}

.step-header.step-4 {
  background-color: rgba(156, 39, 176, 0.1);
  border-left: 5px solid var(--step-4-color);
}

.step-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 15px;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.9);
}

.step-icon.step-1 {
  background-color: var(--step-1-color);
  color: white;
}

.step-icon.step-2 {
  background-color: var(--step-2-color);
  color: white;
}

.step-icon.step-3 {
  background-color: var(--step-3-color);
  color: white;
}

.step-icon.step-4 {
  background-color: var(--step-4-color);
  color: white;
}

.step-info {
  flex: 1;
}

.step-name {
  font-size: 1.2rem;
  color: #2d3748;
  font-weight: 600;
}

.step-desc {
  font-size: 0.9rem;
  color: #718096;
}

/* 列变化表格 */
.schema-container {
  padding: 0 18px 18px;
}

.columns-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
}

.columns-table th, .columns-table td {
  padding: 14px;
  text-align: left;
}

.columns-table th {
  background-color: var(--table-header-bg);
  font-weight: 600;
  font-size: 0.9rem;
  color: #4a5568;
  white-space: nowrap;
}

.columns-table tbody tr {
  transition: all 0.2s ease;
}

/* 图标样式 */
.column-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  margin-right: 10px;
}

.icon-added {
  background-color: #2e7d32;
  color: white;
}

.icon-removed {
  background-color: #c62828;
  color: white;
}

.icon-modified {
  background-color: #ef6c00;
  color: white;
}

.icon-split {
  background-color: #0288d1;
  color: white;
}

.icon-aggregate {
  background-color: #7b1fa2;
  color: white;
}

.icon-none {
  visibility: hidden;
}

/* 列名样式 */
.column-name {
  font-weight: 500;
  color: #2d3748;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.removed-column {
  text-decoration: line-through;
  color: #c62828;
  opacity: 0.7;
}

/* 为不同变化类型添加背景色 */
.row-added {
  background-color: var(--added-color);
  border-left: 4px solid #2e7d32;
}

.row-modified {
  background-color: var(--modified-color);
  border-left: 4px solid #ef6c00;
}

.row-removed {
  background-color: var(--removed-color);
  border-left: 4px solid #c62828;
}

.row-split {
  background-color: var(--split-color);
  border-left: 4px solid #0288d1;
}

.row-aggregate {
  background-color: var(--aggregate-color);
  border-left: 4px solid #7b1fa2;
}

.row-added td, .row-modified td, .row-removed td,
.row-split td, .row-aggregate td {
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.columns-table tr:last-child td {
  border-bottom: none;
}

.columns-table tr:hover {
  transform: translateX(3px);
  background-color: rgba(0, 0, 0, 0.02);
}

.columns-table .row-added:hover {
  background-color: color-mix(in srgb, var(--added-color) 80%, white);
}

.columns-table .row-modified:hover {
  background-color: color-mix(in srgb, var(--modified-color) 80%, white);
}

.columns-table .row-removed:hover {
  background-color: color-mix(in srgb, var(--removed-color) 80%, white);
}

.columns-table .row-split:hover {
  background-color: color-mix(in srgb, var(--split-color) 80%, white);
}

.columns-table .row-aggregate:hover {
  background-color: color-mix(in srgb, var(--aggregate-color) 80%, white);
}

/* 控制列显示的小图标样式 */
.toggle-columns {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  font-size: 1rem;
  color: #757575;
}

.toggle-columns:hover {
  color: #4285f4;
}

/* 数据集选项卡样式 */
.dataset-tab {
  width: 300px;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  margin-left: 20px;
  flex-shrink: 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%; /* 设置高度为100% */
}

.pipeline-section {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%; /* 设置高度为100% */
}

.pipeline-container {
  flex: 1;
  overflow-x: auto;
}

.tab-header {
  padding: 15px;
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
  background: var(--header-bg);
}

.tab-content {
  padding: 15px;
  max-height: 400px;
  overflow-y: auto;
}

.field-list {
  list-style: none;
  padding: 0;
}

.field-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.field-name {
  font-weight: 500;
  color: #2d3748;
}

.field-type {
  font-size: 0.9rem;
  color: #718096;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .pipeline-container {
    flex-direction: column;
  }

  .dataset-tab {
    width: 100%;
    margin-top: 20px;
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .legend-items {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  .pipeline-title {
    font-size: 1.4rem;
  }

  .legend-items {
    grid-template-columns: 1fr;
  }
}
</style>
